<template>

  <div class="login_container">
    <div class="login_box">
      <!-- 登录头像部分-->
      <div class="avatar_box">
<!--        <img class="avatar_box_img" src="../assets/img/eye.png">-->
        <img  class="avatar_box_img" src="../assets/img/img_1.png">
      </div>
      <el-form ref="loginFormRef" label-width="0px" class="login_Form" :model="logindata" :rules="formRules">
        <!-- 登录表单部分 -->
        <el-form-item  prop="username">
          <el-input prefix-icon="el-icon-user" v-model="logindata.username">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-unlock" v-model="logindata.password" show-password></el-input>
        </el-form-item>
        <!-- 按鈕區域  -->
<!--        <div class="btns">
          <div class="el-button-one"> 注册</div>
          <div class="el-button-two"> 登录</div>
          <div class="el-button-three"> 重置</div>
        </div>-->
        <el-form-item class="btns" >
          <el-button class="el-button-one" type="success" @click="toRegister()"> 注册</el-button>
          <el-button class="el-button-two" type="primary" @click="onSubmit()" native-type="submit">登录</el-button>
          <el-button class="el-button-three" type="info"  @click="reSet()" >重置</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>
<script>
import {login} from "../api";
import qs from 'qs'
export default {
  name: 'Login',
  data(){
    return {
      logindata: {
        // id: '',
        username: '',
        password: ''
        // ,
        // ip: '',
        // token: ''
      }
      ,
      formRules: {
        username:[
          {required: true, message: '请输入账户名称', trigger: 'blur'},
          {min:2 ,max:6 ,message: '长度在2到6个字符之间' ,trigger: 'blur'}
        ],
        password:[
          {required: true ,message: '请输入密码',trigger: 'blur'},
          {len:8,message: '请输入8位密码',trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
    onSubmit(){
      this.$refs.loginFormRef.validate(async (valid) => {
        if (valid){
          let data={
            username: this.logindata.username,
            password: this.logindata.password
          }
         await login(data).then( res => {
            if (res.data.code==200){
              this.$message({
                message: '登陆成功，欢迎您',
                type: "success"
              })
              window.sessionStorage.setItem("token",res.data.content.token)
              window.sessionStorage.setItem("userid",res.data.content.id)
              this.$router.push("/main");
            }
            else {
              this.$refs.loginFormRef.resetFields()
              this.$message({
                message: '登陆失败，请重新登录',
                type: "error"
              })
            }
          })

          console.log(res)
          // const result = await this.$http.post("login",this.logindata)
        }else {
          return false;
        }
      })
    },
    reSet(){
      this.$refs.loginFormRef.resetFields()
    },
    toRegister(){
      this.$router.push('/register')
    }
  }
}


</script>
<style lang="less">
.login_container {
  height: 100%;
  width: 100%;
  background-color: #38b5de;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: #eee;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.avatar_box {
  height: 130px;
  width: 100px;
  border: 1px solid #fff;
  border-radius: 50%;
  padding: 10px;
  margin: auto;
  box-shadow: 0 0 14px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  .avatar_box_img{
    border-radius: 50%;
  }
}

.login_box img {
  height: 100%;
  width: 100%;
  //border-radius: 50%;
  background-color: #ddd;
}

.login_Form {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 0 20px;
  box-sizing: border-box;
}

.btns {
  //display: flex;
  //flex-flow: column wrap;
  //justify-content: flex-end;
  //flex-direction: row;
}

.el-button-one{
  //flex: 2 1 0;
  //background-color: #38b5de;
  float: right;
}
.el-button-two{
  //flex: 1 1 0;
  //background-color: #820ea2;
  //float: end;
}
.el-button-three{
  //flex: 1 1 0;
  //background-color: brown;
  //float: right;
}
</style>
